<script setup lang="ts">
import Nav from "@/components/Nav.vue";
import router,{resetRouter} from "@/router";
import {computed, ref} from "vue";
import {navStore,userStore} from "@/store";
const nav = navStore()
const user = userStore()
const title = import.meta.env.VITE_APP_TITLE;
const isShow = computed(() => {
  return !user.isLogin
})
const toLogin = () => {
  router.push('/login')
}
const logout = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('nav')
  resetRouter()
  nav.initNavList()
  toLogin()
}
const isSearchFocus = ref(false);
const searchData = ref('');
const changeSearchFocus = (value: boolean) => {
  if (!value) {
    searchData.value = '';
  }
  isSearchFocus.value = value;
};
</script>

<template>
  <div class="header">
    <div class="logo" @click="router.push('/')">
      <img src="@/assets/logo.svg" alt="logo">
      <span>{{ title }}</span>
    </div>
    <div class="menu-button">
      <t-button variant="text" shape="square" @click="nav.changeCollapsed">
        <template #icon><t-icon name="view-list" /></template>
      </t-button>
    </div>
    <div class="search">
      <t-input
          :class="['header-search', { 'hover-active': isSearchFocus }]"
          placeholder="请输入菜单名称"
          @blur="changeSearchFocus(false)"
          @focus="changeSearchFocus(true)"
      >
        <template #prefix-icon>
          <t-icon class="icon" name="search" size="16" />
        </template>
      </t-input>
    </div>
    <div class="user">
      <t-dropdown>
        <t-button variant="text" theme="default">
          <template #icon><t-icon name="user" /></template>
          <div class="header-user-account">{{ user.getUserNikeName }}</div>
          <template #suffix><t-icon name="chevron-down" /></template>
        </t-button>
        <t-dropdown-menu>
          <t-dropdown-item  v-if="isShow" @click="toLogin">
            <t-icon name="setting" />
            <span>登录</span>
          </t-dropdown-item>
          <t-dropdown-item v-if="!isShow">
            <t-icon name="user" />
            <span>个人中心</span>
          </t-dropdown-item>
          <t-dropdown-item v-if="!isShow" @click="logout">
            <t-icon name="logout" />
            <span>退出</span>
          </t-dropdown-item>
        </t-dropdown-menu>
        <template #dropdown>
          <t-icon name="chevron-down" />
        </template>
      </t-dropdown>
    </div>
  </div>
  <div class="main">
    <Nav class="menu"/>
    <div class="content">
      <router-view />
    </div>
  </div>
</template>

<style scoped lang="less">
.main {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  margin-top: 10px;
  overflow: hidden;
  .menu {
    min-height: 100vh;
  }
  .content {
    flex: 1;
    overflow: auto;
    padding: 20px;
    background-color: #F2F2F4;
  }
}
.header {
  display: flex;
  width: 100%;
  height: 60px;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
  .logo {
    margin: 0 20px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    & > span {
      margin-left: 8px;
      font-weight: 600;
    }
    &:hover {
      cursor: pointer;
    }
  }
  .menu-button {
    margin-left: 16px;
  }
  .search {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    margin-left: 16px;
    .menu-search {
      margin: 0 0 16px;
      display: flex;
      flex-direction: row;
    }
    .hover-active {
      background: var(--td-bg-color-secondarycontainer);
    }

    .t-icon {
      color: var(--td-text-color-primary) !important;
    }
    .header-search {
      width: 200px;
      transition: width 0.2s cubic-bezier(0.38, 0, 0.24, 1);
      :deep(.t-input) {
        border: none;
        outline: none;
        box-shadow: none;
        transition: background 0.2s linear;
        .t-input__inner {
          transition: background 0.2s linear;
        }
        .t-input__inner {
          background: none;
        }
        &:hover {
          background: var(--td-bg-color-secondarycontainer);
          .t-input__inner {
            background: var(--td-bg-color-secondarycontainer);
          }
        }
      }
    }
  }
  .user {
    margin-left: auto;
    margin-right: 50px;
    .t-button {
      margin-left: 8px;
      color: #000;
      &:hover {
        background-color: #F2F3FF; // 设置悬浮时的背景颜色
        border-color: transparent; // 设置悬浮时的边框颜色
        --ripple-color: #F2F3FF; // 设置水波纹颜色
      }
    }
  }
}
</style>
